<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 视频 </el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-button type="primary" class="handle-del mr10" @click="addDialog">新增视频</el-button>
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除
				</el-button>
				<el-input v-model="query.keyword" placeholder="输入视频名称" class="handle-input mr10"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
			</div>
			<el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column label="视频封面" width="100">
					<template slot-scope="scope">
						<img :src="scope.row.cover" @error="tabErrorPicture(scope.row.id)" alt="" class="info-image" />
					</template>
				</el-table-column>
				<el-table-column prop="title" label="视频名称"></el-table-column>
				<el-table-column prop="description" label="视频描述"></el-table-column>
				<el-table-column label="免费/付费">
					<template slot-scope="scope">
						<span style="color: #e65c5c">{{ scope.row.price == 0 ? '免费' : '¥ ' + scope.row.price }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="f_view" label="浏览量"></el-table-column>
				<el-table-column prop="f_sales" label="订阅量"></el-table-column>
				<el-table-column prop="f_favorites" label="收藏量"></el-table-column>
				<el-table-column label="操作" width="300" align="center" fixed="right">
					<template slot-scope="scope">
						<el-button @click="playVideo(scope.row.video.path+scope.row.video.name,scope.row.video.bucket)" type="primary" size="mini">预览</el-button>
						<el-button @click="edit(scope.row.id, scope.row)" type="success" size="mini">编辑</el-button>
						<el-button @click="putOn(scope.row.id, scope.row.status)" type="warning" size="mini">{{ scope.row.status == 0 ? '上架' : '下架' }}</el-button>
						<el-button @click="deleteRow(scope.row.id, scope.$index)" type="danger" size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.page"
					:page-size="query.rows" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
		<!-- 新增视频弹出框 -->
		<el-dialog title="新增/编辑视频" @close="cancel" :visible.sync="showDialog" width="600px">
			<el-form ref="form" :model="form" label-width="125px" :rules="rules">
				<el-form-item label="视频名称" prop="title">
					<el-input v-model="form.title"></el-input>
				</el-form-item>
				<el-form-item label="视频描述" prop="description">
					<el-input type="textarea" :rows="2" v-model="form.description"></el-input>
				</el-form-item>
				<el-form-item label="视频封面">
					<div class="avatar-uploader" @click="showUploadImage('videofm')">
						<img v-if="form.cover" :src="form.cover" class="avatar" height="200px">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</div>
					<div class="el-upload__tip">封面建议尺寸：800*600px，支持jpg、png</div>
				</el-form-item>
				<el-form-item label="视频贴片">
					<div class="avatar-uploader" @click="showUploadImage('videotp')">
						<img v-if="form.video_paster" :src="form.video_paster" class="avatar" height="200px">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</div>
					<div class="el-upload__tip">贴片建议尺寸：750*422px，视频贴片是指视频播放器在播放前展示的图片</div>
				</el-form-item>
				<el-form-item label="分类" prop="category_id">
					<el-select v-model="form.category_id" clearable placeholder="请选择视频分类" v-if="!category_length">
						<!-- <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id"> </el-option> -->
						<el-option-group v-for="group in options" :key="group.id" :label="group.title">
							<el-option v-for="item in group._child" :key="item.id" :label="item.title" :value="item.id">
							</el-option>
						</el-option-group>
					</el-select>
					
					<a href="/classification" class="data-overview-item__num" v-if="category_length">暂无分类，请前往创建</a>
					
				</el-form-item>
				<el-form-item label="会员专享">
					<el-checkbox :true-label="1" :false-label="0" v-model="form.only_member">勾选后仅会员可订阅</el-checkbox>
				</el-form-item>
				<el-form-item label="允许单独售卖">
					<el-radio-group v-model="form.alone_sale">
						<el-radio :label="1">允许</el-radio>
						<el-radio :label="0">禁止</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="是否付费">
					<el-radio-group v-model="form.expense" @change="course_price">
						<el-radio :label="0">免费</el-radio>
						<el-radio :label="1">付费</el-radio>
					</el-radio-group>
					<div v-if="form.expense == 1">
						<el-form-item label="商品价格">
							<el-input v-model="form.price" class="showPay"></el-input><span>元</span>
						</el-form-item>
						<el-form-item label="划线价格">
							<el-input v-model="form.marking_price" class="showPay"></el-input><span>元</span>
						</el-form-item>
					</div>
				</el-form-item>
				<el-form-item label="返还积分">
					<el-input v-model="form.score"></el-input>
				</el-form-item>
				<el-form-item label="试看设置">
					<el-radio-group v-model="form.try_type" @change="try_video_set">
						<el-radio label="time">试看时间</el-radio>
						<el-radio label="custom">自定义片段</el-radio>
						<el-radio label="none">禁止试看</el-radio>
					</el-radio-group>
					<div v-if="form.try_type == 'time'">
						<el-input-number v-model="form.try_time" controls-position="right" :min="0"></el-input-number>
						<span style="margin-left: 10px">秒</span>
					</div>
					<div v-if="form.try_type == 'custom'">
						<el-form-item label="自定义视频上传">
							<el-upload :action="videoUrl" :on-success="customHandleVideo"
								:on-remove="customHandleVideoRemove" :file-list="customVideoList" accept=".mp4,.m3u8">
								<el-button size="small" type="primary" @click="showUploadVideo('customvideo')">选择视频
								</el-button>
								<div slot="tip" class="el-upload__tip">支持格式mp4,m3u8</div>
							</el-upload>
						</el-form-item>
					</div>
				</el-form-item>
				<el-form-item label="完整视频上传">
					<!-- <el-upload action="#" :on-success="handleVideo" :on-remove="handleVideoRemove"
						:file-list="videoList" accept=".mp4,.m3u8">
					</el-upload> -->
					<el-button size="small" type="primary" @click="showUploadVideo('wzvideo')">选择视频</el-button>
					<div>
						<img v-if="form.video" :src="form.video.src" height="200px"
							@click="playVideo(form.video.path+form.video.name,form.video.bucket)">
					</div>
				</el-form-item>
				<el-form-item label="订阅后自定义内容">
					<quill-editor v-model="form.custom_desc" :options="editorOption" ref="myQuillEditor"></quill-editor>
				</el-form-item>
				<el-form-item label="完整内容">
					<quill-editor v-model="form.content" :options="editorOption2" ref="myQuillEditor2"></quill-editor>
				</el-form-item>
				<el-form-item label="选择讲师" prop="teacher_id">
					<el-button @click="chooseLecturer" type="primary" size="mini">选择讲师</el-button>
					<el-table :data="selectRowData" v-if="selectRowData.length !== 0" class="table" ref="multipleTable"
						header-cell-class-name="table-header">
						<el-table-column label="讲师图片">
							<template slot-scope="scope">
								<img :src="scope.row.cover" @error="tabErrorPicture(scope.row.id)" alt="" class="info-image" />
							</template>
						</el-table-column>
						<el-table-column prop="name" label="讲师姓名"></el-table-column>
						<el-table-column prop="description" label="讲师描述"></el-table-column>
						<el-table-column label="操作" align="center">
							<el-button @click="del_lecturer" type="danger" size="mini">移除讲师</el-button>
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item label="自定义浏览量">
					<el-input v-model="form.f_view"></el-input>
				</el-form-item>
				<el-form-item label="自定义订阅量">
					<el-input v-model="form.f_sales"></el-input>
				</el-form-item>
				<el-form-item label="自定义收藏量">
					<el-input v-model="form.f_favorites"></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.sort"></el-input>
				</el-form-item>
				<el-form-item label="状态设置">
					<el-radio-group v-model="form.status">
						<el-radio :label="1">立即上架</el-radio>
						<el-radio :label="0">暂不上架</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="save('form')">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 讲师弹框 -->
		<el-dialog width="440px" title="选择讲师" @close="exit" :visible.sync="innerVisible" append-to-body>
			<el-form ref="form" :model="form">
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="输入讲师姓名" class="handle-input mr10"></el-input>
					<el-button type="primary" icon="el-icon-search" @click="lecturerSearch">搜索</el-button>
				</el-form-item>
				<el-table :data="chooseLecturerTableData" @row-click="chooseRow" class="chooseLecturerTable"
					ref="multipleTable" header-cell-class-name="table-header">
					<el-table-column prop="name" label="讲师图片">
						<template slot-scope="scope">
							<img :src="scope.row.cover" alt="" class="info-image" />
						</template>
					</el-table-column>
					<el-table-column prop="name" label="讲师姓名"></el-table-column>
					<el-table-column prop="description" label="讲师描述"></el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination background layout="total, prev, pager, next" :current-page="query.page"
						:page-size="query.rows" :total="lecturerListTotal" @current-change="lecturerPageChange">
					</el-pagination>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="exit">关 闭</el-button>
			</span>
		</el-dialog>
		<!-- 预览弹出框 -->
		<el-dialog :title="title" :visible.sync="previewDialogVisible" width="30%">
			<div class="preview">
				<!-- <h3>微信扫码预览</h3>
				<qriously class="qrCode" :value="preview_url" :size="200" :backgroundAlpha="1" />
				<el-input v-model="preview_url">
					<template slot="prepend">SPA版url</template>
					<el-button v-clipboard="copy_value" v-clipboard:success="clipboardSuccessHandler"
						v-clipboard:error="clipboardErrorHandler" slot="append">复制</el-button>
				</el-input> -->
				<video style="width:50%" :src="preview_url"></video>
			</div>
		</el-dialog>
		<el-dialog title="视频" :visible.sync="videoplayshow" width="50%" :before-close="handleClose" append-to-body>
			<div id="J_prismPlayer"></div>
		</el-dialog>
		<uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
		<uploadvideo ref="uploadvideocom" v-on:childByVideoValue="childByVideoValue"></uploadvideo>
	</div>
</template>

<script>
// 自定义工具栏配置
const toolbarOptions = [
	["bold", "italic", "underline", "strike"], // toggled buttons
	["blockquote", "code-block"],

	[{ header: 1 }, { header: 2 }], // custom button values
	[{ list: "ordered" }, { list: "bullet" }],
	[{ script: "sub" }, { script: "super" }], // superscript/subscript
	[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
	[{ direction: "rtl" }], // text direction

	[{ size: ["small", false, "large", "huge"] }], // custom dropdown
	[{ header: [1, 2, 3, 4, 5, 6, false] }],

	[{ color: [] }, { background: [] }], // dropdown with defaults from theme
	[{ font: [] }],
	[{ align: [] }],
	["link", "image", "video"], // 对于图片上传这是重点
	["clean"], // remove formatting button
];
import uploadimage from '@/components/common/uploadimage.vue';
import uploadvideo from '@/components/common/uploadvideo.vue';
import showfileMixin from '@/mixin/showossfile.js';
import {
	classifyListData,
	lecturerListData,
	videoListData,
	addVideoData,
	delVideoData
} from '../../api/index';
export default {
	name: 'lecturer',
	components: {
		uploadimage,
		uploadvideo
	},
	mixins: [showfileMixin],
	data() {
		return {
			category_length:false,
			query: {
				type: 'video',
				status: 0,
				page: 1,
				rows: 4,
				keyword: ''
			},
			//imgUrl: 'http://api.xuejing.pro/admin/file/image',
			videoUrl: 'http://api.xuejing.pro/admin/file/video',
			title: '',
			preview_url: '',
			copy_value: '',
			form: {
				type: '',
				id: '',
				teacher_id: '',
				title: '',
				description: '',
				cover: '',
				video_paster: '',
				category_id: '',
				only_member: '',
				alone_sale: '',
				expense: '',
				price: '',
				marking_price: '',
				score: '',
				try_type: '',
				try_time: '',
				try_video: '',
				video: '', //video地址,video{src,path,name,bucket}//json字符串
				custom_desc: '',
				content: '',
				f_view: '',
				f_sales: '',
				f_favorites: '',
				sort: '',
				status: 1
			},
			rules: {
				title: [
					{ required: true, message: "请输入视频名称", trigger: 'bulr' },
					{ min: 1, max: 30, message: "长度在1到30个字符", reigger: 'bulr' }
				],
				// teacher_id: [{ required: true, message: "请选择讲师", trigger: "bulr" }],
				category_id: [{ required: true, message: "请选择分类", trigger: "bulr" }]
			},
			options: [{
				id: '1',
				title: '黄金糕',
				_child: [{
					id: '6',
					title: '测试'
				}]
			}],
			// options_child: [],
			tableData: [],
			multipleSelection: [],
			delList: [],
			chooseLecturerTableData: [],
			selectRowData: [],
			showDialog: false,
			innerVisible: false,
			previewDialogVisible: false,
			pageTotal: 0,
			lecturerListTotal: 0,
			action: '',
			videoplayshow: false,
			player: '',
			// 富文本自定义配置项
			editorOption: {
				modules: {
					toolbar: {
						container: toolbarOptions, // 工具栏
						handlers: {
							// 此处开始改写自带的图片上传
							image: (value) => {
								this.$refs.uploadimagecom.dialogVisible = true;
								this.action = "form_custom_desc_image";
							}
						},
					},
					// 调整图片大小
					imageResize: {
						displayStyles: {
							backgroundColor: 'black',
							border: 'none',
							color: 'white'
						},
						modules: ['Resize', 'DisplaySize', 'Toolbar']
					}
				},
			},
			// 富文本自定义配置项
			editorOption2: {
				modules: {
					toolbar: {
						container: toolbarOptions, // 工具栏
						handlers: {
							// 此处开始改写自带的图片上传
							image: (value) => {
								this.$refs.uploadimagecom.dialogVisible = true;
								this.action = "form_content_image";
							}
						},
					},
					// 调整图片大小
					imageResize: {
						displayStyles: {
							backgroundColor: 'black',
							border: 'none',
							color: 'white'
						},
						modules: ['Resize', 'DisplaySize', 'Toolbar']
					}
				},
			},
			errorProduct: require('@/assets/img/noProduct.jpg'), 
		};
	},
	created() {
		this.getData();
	},
	methods: {
		tabErrorPicture(id){    // 表格图文封面默认展示图
            let i = this.tableData.findIndex(v => v.id == id);
			this.tableData[i].cover = this.errorProduct;
        },
		getData() {
			videoListData(this.query).then((res) => {
				//console.log(res);
				this.tableData = res.data.list;
				this.pageTotal = res.data.count;
			});
		},
		// 多选操作
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		//批量删除
		delAllSelection() {
			this.$confirm('确定要删除吗？', '提示', {
				type: 'warning'
			}).then(() => {
				const length = this.multipleSelection.length;
				let str = '';
				let strID = '';
				this.delList = this.delList.concat(this.multipleSelection);
				console.log(this.delList);
				for (let i = 0; i < length; i++) {
					str += this.multipleSelection[i].title + ' ';
					strID += this.multipleSelection[i].id + ',';
				}
				delVideoData({
					id: strID.substring(0, strID.lastIndexOf(','))
				}).then((res) => {
					if (res.code == 1) {
						this.$message.success(`删除了${str}`);
						this.multipleSelection = [];
						this.getData();
						//location.reload();
					}
				});
			});
		},
		// 搜索
		handleSearch() {
			this.$set(this.query);
			this.getData();
		},
		// 讲师搜索
		lecturerSearch() {
			this.chooseLecturer();
		},
		// 分页
		handlePageChange(val) {
			this.$set(this.query, 'page', val);
			this.getData();
		},
		// 讲师分页
		lecturerPageChange(val) {
			this.$set(this.query, 'page', val);
			this.chooseLecturer();
		},
		course_price(v) {
			if (v == 0) {
				this.form.price = '';
				this.form.marking_price = '';
			}
		},
		try_video_set(v) {
			if (v == 'time') {
				this.form.try_video = '';
			} else if (v == 'custom') {
				this.form.try_time = '';
			} else {
				this.form.try_time = '';
				this.form.try_video = '';
			}
		},
		// 自定义视频上传
		customHandleVideo(res) {
			if (res.code == 1) {
				this.form.try_video = res.data.attachment;
			}
		},
		customHandleVideoRemove(file, fileList) {
			// console.log(file, fileList);
		},
		// 完整视频上传
		handleVideo(res) {
			if (res.code == 1) {
				this.form.video = res.data.attachment;
			}
		},
		handleVideoRemove(file, fileList) {
			// console.log(file, fileList);
		},
		//新增
		addDialog() {
			this.showDialog = true;
			this.selectRowData = [];
			classifyListData().then((res) => {
				this.options = res.data.list;
				
				if(res.data.list.length >0){
					this.category_length = false;
				}else{
					this.category_length = true;
				}
				
				//console.log(this.options);
			});
		},
		chooseLecturer() {
			this.innerVisible = true;
			lecturerListData(this.query).then((res) => {
				this.chooseLecturerTableData = res.data.list;
				this.lecturerListTotal = res.data.count;
			});
		},
		chooseRow(row) {
			this.selectRowData = [];
			this.selectRowData.push(row);
			this.form.teacher_id = row.id;
			this.innerVisible = false;
		},
		del_lecturer() {
			this.selectRowData = [];
			this.form.teacher_id = '';
		},
		// 预览
		preview(video, title) {
			this.previewDialogVisible = true;
			this.title = title;
			this.copy_value =
			this.preview_url = `https://${video.bucket}.oss-cn-beijing.aliyuncs.com/${video.path}${video.name}`;
				// this.preview_url =`${this.$front.FrontUrl}/xuejing/videocontent/${localStorage.getItem(domainname)}?id=${id}`;
		},
		clipboardSuccessHandler({
			value,
			event
		}) {
			this.$message.success('复制成功');
		},
		clipboardErrorHandler({
			value,
			event
		}) {
			console.log('复制失败', value);
		},
		//编辑
		edit(id, row) {
			classifyListData().then((res) => {
				this.options = res.data.list;
			});
			this.selectRowData = [];
			this.showDialog = true;
			this.form = row;
			// if ((typeof this.form.video == 'string') && this.form.video.constructor == String) {
			// 	this.form.video = JSON.parse(this.form.video);
			// }
			if(row.teacher_info){
            this.selectRowData.push(row.teacher_info);}
		},
		//上下架
		putOn(id, status) {
			console.log(id);
			this.$confirm(`确定${status == 0 ? '上架' : '下架'}吗！`, '提示', {
				type: 'warning'
			}).then(() => {
				addVideoData({
					id: id,
					status: status == 0 ? 1 : 0
				}).then((res) => {
					console.log(res);
					if (res.code == 1) {
						this.$message.success('成功');
						this.getData();
						//location.reload();
					}
				});
			});
		},
		//删除
		deleteRow(id, index) {
			// 二次确认删除
			this.$confirm('确定要删除吗？', '提示', {
				type: 'warning'
			}).then(() => {
				delVideoData({
					id: id
				}).then((res) => {
					if (res.code == 1) {
						this.$message.success('删除成功');
						this.tableData.splice(index, 1);
						this.getData();
						//location.reload();
					}
				});
			});
		},
		//取消
		cancel() {
			this.form = {};
			this.pictureList = [];
			this.pasterList = [];
			this.customVideoList = [];
			this.videoList = [];
			this.showDialog = false;
		},
		//关闭
		exit() {
			this.innerVisible = false;
		},
		//确定了
		save(formName) {
			// let formData = new FormData();
			// formData.append('cover', this.cover);
			// formData.append('video', this.video);
			// formData.append("form", JSON.stringify(this.form));
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.form.type = 'video';
					 if(Object.prototype.toString.call(this.form.video) === '[object Object]'){
                    this.form.video = JSON.stringify(this.form.video);
                    }
					addVideoData(this.form).then((res) => {
						//console.log(res);
						if (res.code == 1) {
							this.showDialog = false;
							this.$message.success('操作成功');
							setTimeout(() => {
								this.getData();
							}, 200);
						}
					});
				}else{
					return false
				}
			})
		},
		showUploadImage(action) { //显示上传组件
			this.$refs.uploadimagecom.dialogVisible = true;
			this.action = action;
		},
		showUploadVideo(action) {
			this.$refs.uploadvideocom.dialogVisible = true;
			console.log(1);
			this.action = action;
		},
		//确认按钮传值过来并赋值到form表单上
		childByImageValue: function (childValue) {
			if (this.action == "videofm") {
				this.form.cover = childValue;
			} else if (this.action == "videotp") {
				this.form.video_paster = childValue;
				//console.log(this.form.video_paster);
			} else if (this.action == "form_custom_desc_image") {
				let quill = this.$refs.myQuillEditor.quill;
				// 获取光标所在位置
				let length = quill.getSelection().index;
				// 插入图片，res为服务器返回的图片链接地址
				quill.insertEmbed(length, "image", childValue);
				quill.setSelection(length + 1);
			} else if (this.action == "form_content_image") {
				let quill = this.$refs.myQuillEditor2.quill;
				// 获取光标所在位置
				let length = quill.getSelection().index;
				// 插入图片，res为服务器返回的图片链接地址
				quill.insertEmbed(length, "image", childValue);
				quill.setSelection(length + 1);
			}
		},
		childByVideoValue: function (childValue) {
			if (this.action == "wzvideo") {
				this.form.video = {
					src: childValue.src,
					bucket: childValue.bucket,
					path: childValue.path,
					name: childValue.name
				};
			} else if (this.action == "customvideo") {

			}
		},
		async playVideo(path, bucket) { //bucket默认xuejingres
			//console.log(path);
			console.log(path);
			this.videoplayshow = true;
			let res = await this.getSignatureUrl(path); //bucket默认xuejingres,暂时可以不填写
			console.log(res);
			var player = new Aliplayer({
				id: 'J_prismPlayer',
				source: res, //播放地址，可以是第三方点播地址，或阿里云点播服务中的播放地址。
				"width": "100%",
				"height": "500px",
				"autoplay": true,
				"isLive": false,
				"rePlay": false,
				"playsinline": true,
				"preload": true,
				"controlBarVisibility": "hover",
				"useH5Prism": true,
				"extraInfo": {
					"crossOrigin": "anonymous"
				},
				"skinLayout": [{
					"name": "bigPlayButton",
					"align": "blabs",
					"x": 30,
					"y": 80
				},
				{
					"name": "H5Loading",
					"align": "cc"
				},
				{
					"name": "errorDisplay",
					"align": "tlabs",
					"x": 0,
					"y": 0
				},
				{
					"name": "infoDisplay"
				},
				{
					"name": "tooltip",
					"align": "blabs",
					"x": 0,
					"y": 56
				},
				{
					"name": "thumbnail"
				},
				{
					"name": "controlBar",
					"align": "blabs",
					"x": 0,
					"y": 0,
					"children": [{
						"name": "progress",
						"align": "blabs",
						"x": 0,
						"y": 44
					},
					{
						"name": "playButton",
						"align": "tl",
						"x": 15,
						"y": 12
					},
					{
						"name": "timeDisplay",
						"align": "tl",
						"x": 10,
						"y": 7
					},
					{
						"name": "fullScreenButton",
						"align": "tr",
						"x": 10,
						"y": 12
					},
					{
						"name": "subtitle",
						"align": "tr",
						"x": 15,
						"y": 12
					},
					{
						"name": "setting",
						"align": "tr",
						"x": 15,
						"y": 12
					},
					{
						"name": "volume",
						"align": "tr",
						"x": 5,
						"y": 10
					},
					{
						"name": "snapshot",
						"align": "tr",
						"x": 10,
						"y": 12
					}
					]
				}
				]
			}, function (player) {
				//console.log("The player is created");
				player.play();
			});
			this.player = player;

			/* h5截图按钮, 截图成功回调 */
			player.on('snapshoted', function (data) {
				var pictureData = data.paramData.base64
				var downloadElement = document.createElement('a')
				downloadElement.setAttribute('href', pictureData)
				var fileName = 'Aliplayer' + Date.now() + '.png'
				downloadElement.setAttribute('download', fileName)
				downloadElement.click()
				pictureData = null
			});
		},
		handleClose() {
			this.player.dispose()
			this.videoplayshow = false;
		}
	}
};
</script>

<style scoped lang="scss">
.handle-box {
	margin-bottom: 20px;
	float: right;
}

.handle-input {
	width: 300px;
	display: inline-block;
}

.table {
	width: 100%;
	font-size: 14px;
}

.mr10 {
	margin-right: 10px;
}

.info-image {
	width: 80px;
	border-radius: 4px;
}

.showPay {
	width: 150px;
	margin-right: 10px;
	margin-bottom: 15px;
}

.chooseLecturerTable {
	cursor: pointer;
}

.preview {
	padding: 30px;
	text-align: center;
}

.preview .qrCode {
	margin: 10px 0;
}

.avatar-uploader {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	width: 100% !important;
	text-align: center;
}

.avatar-uploader:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
}

.avatar {
	width: 100%;
	display: block;
}
</style>

<style>
.el-upload--text {
	border: 0;
	height: 40px;
	text-align: left;
	overflow: unset;
}

.el-upload__tip {
	margin-top: 0;
}

.el-input-group__append {
	background: #e6a23c;
}

.el-input-group__append span {
	color: #fff;
}

.ql-container {
	height: 200px;
}
</style>
